<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>transform-style的使用</title>
	<style type="text/css">
		.wrap {
			width: 500px;
			height: 300px;
			margin: 30px auto;
			position: relative;
			background: url(images/bg-grid.jpg) no-repeat center center;
			background-size: 100% 100%;
		}
		@-webkit-keyframes spin{
			0%{
				-webkit-transform:rotateY(0deg);
				transform:rotateY(0deg)
			}
			100%{
				-webkit-transform:rotateY(360deg);
				transform:rotateY(360deg)
			}
		}
		@-moz-keyframes spin{
			0%{
				-moz-transform:rotateY(0deg);
				transform:rotateY(0deg)
			}
			100%{
				-moz-transform:rotateY(360deg);
				transform:rotateY(360deg)}
		}
		@-ms-keyframes spin{
			0%{
				-ms-transform:rotateY(0deg);
				transform:rotateY(0deg)
			}
			100%{
				-ms-transform:rotateY(360deg);
				transform:rotateY(360deg)}
		}
		@-o-keyframes spin{
			0%{
				-o-transform:rotateY(0deg);
				transform:rotateY(0deg)
			}
			100%{
				-o-transform:rotateY(360deg);
				transform:rotateY(360deg)}
		}
		@keyframes spin{
			0%{
				transform:rotateY(0deg)
			}
			100%{
				transform:rotateY(360deg)
			}
		}
		.spin {
			width: 142px;
			height: 200px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -72px;
			margin-top: -101px;
			border: 1px dashed orange;
			cursor: pointer;
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		.spin:hover{
			-moz-animation:spin 5s linear infinite;
			-o-animation:spin 5s linear infinite;
			-webkit-animation:spin 5s linear infinite;
			-ms-animation:spin 5s linear infinite;
			animation:spin 5s linear infinite;
		}
		.rotate {
			background: url(images/cardKingClub.png) no-repeat center;
			background-size: 100% 100%;
			border: 5px solid hsla(50,50%,50%,.9);
			-webkit-transform: perspective(200px) rotateY(45deg);
			-moz-transform: perspective(200px) rotateY(45deg);
			-ms-transform: perspective(200px) rotateY(45deg);
			-o-transform: perspective(200px) rotateY(45deg);
			transform: perspective(200px) rotateY(45deg);
		}
		.rotate img{
			border: 1px solid green;
			-webkit-transform: rotateX(15deg) translateZ(10px);
			-moz-transform: rotateX(15deg) translateZ(10px);
			-ms-transform: rotateX(15deg) translateZ(10px);
			-o-transform: rotateX(15deg) translateZ(10px);
			transform: rotateX(15deg) translateZ(10px);
			-webkit-transform-origin: 0 0 40px;
			-moz-transform-origin: 0 0 40px;
			-ms-transform-origin: 0 0 40px;
			-o-transform-origin: 0 0 40px;
			transform-origin: 0 0 40px;
		}
		 .three-d {
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		
	</style>
</head>
<body>
<div class="wrap">
	<div class="spin">
		<div class="rotate">
			<img src="images/cardKingClub.png" alt="" width="142" height="200" />
		</div>
	</div>
</div>
<div class="wrap">
	<div class="spin">
		<div class="rotate three-d">
			<img src="images/cardKingClub.png" alt="" width="142" height="200" />
		</div>
	</div>
</div>
	
</body>
</html>